<template>
	<div class="app-container">
		<process-designer-common :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm" keyboard
			ref="processDesigner" @element-click="elementClick" @init-finished="initModeler" />
		<properties-panel-common :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler" :prefix="controlForm.prefix"
			class="process-panel" />
	</div>
</template>

<script>
	import {
		getActivitiDetail
	} from "@/api/supplierActivity/definition";

	import translations from "@/translations";
	// 自定义渲染（隐藏了 label 标签）
	import CustomRenderer from "@/modules/custom-renderer";
	// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
	import CustomContentPadProvider from "../../../../package/supplierActivity/process-designer/plugins/content-pad";
	// 自定义左侧菜单（修改 默认任务 为 用户任务）
	import CustomPaletteProvider from "../../../../package/supplierActivity/process-designer/plugins/palette";
	// 自定义侧边栏
	// import MyProcessPanel from "../package/process-panel/ProcessPanel";

	export default {
		name: "activiti3-common",
		components: {},
		data() {
			return {
				xmlString: '',
				modeler: null,
				reloadIndex: 0,
				controlDrawerVisible: false,
				translationsSelf: translations,
				controlForm: {
					processId: "",
					processName: "",
					simulation: true,
					labelEditing: false,
					labelVisible: false,
					// prefix: "camunda",
					prefix: "activiti",
					headerButtonSize: "mini",
					additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
				},
				addis: {},
				deploymentId: '',
				type: ''
				// deptId: ''
			};
		},
		created() {
			// console.log(this.translationsSelf);
		},
		mounted(t) {
			var that = this;
			localStorage.removeItem("deptId");
			var deploymentId = that.$route.query.deploymentId;
			var type = that.$route.query.type;
			// var deptId = that.$route.query.deptId;
			that.deploymentId = deploymentId;
			that.type = type;
			// that.deptId = deptId;
			localStorage.setItem("type", type);
			// localStorage.setItem("deptId", deptId);
			if (deploymentId) {
				getActivitiDetail(deploymentId).then(response => {
					that.xmlString = response;
					that.reloadProcessDesigner();
				});
			}
		},
		methods: {
			initModeler(modeler) {
				setTimeout(() => {
					this.modeler = modeler;
				}, 10);
			},
			reloadProcessDesigner() {
				this.controlForm.additionalModel = [];
				for (let key in this.addis) {
					if (this.addis[key]) {
						this.controlForm.additionalModel.push(this.addis[key]);
					}
				}
				this.reloadIndex += 1;
				this.modeler = null; // 避免 panel 异常
			},
			changeLabelEditingStatus(status) {
				this.addis.labelEditing = status ? {
					labelEditingProvider: ["value", ""]
				} : false;
				this.reloadProcessDesigner();
			},
			changeLabelVisibleStatus(status) {
				this.addis.customRenderer = status ? CustomRenderer : false;
				this.reloadProcessDesigner();
			},
			elementClick(element) {
				this.element = element;
			}
		}
	};
</script>

<style scoped lang="scss">
	.app-container{
		width: 100%;
		height: calc(100% - 90px);
		box-sizing: border-box;
		display: inline-grid;
		grid-template-columns: auto max-content;
	}
</style>
<style lang="scss" scoped>
	body {
		overflow: hidden;
		margin: 0;
		box-sizing: border-box;
	}

	#app {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		display: inline-grid;
		grid-template-columns: auto max-content;
	}

	.demo-control-bar {
		position: fixed;
		right: 8px;
		bottom: 8px;
		z-index: 1;

		.open-control-dialog {
			width: 48px;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 4px;
			font-size: 32px;
			background: rgba(64, 158, 255, 1);
			color: #ffffff;
			cursor: pointer;
		}
	}

	.control-form {
		.el-radio {
			width: 100%;
			line-height: 32px;
		}
	}

	body,
	body * {

		/* 滚动条 */
		&::-webkit-scrollbar-track-piece {
			background-color: #fff;
			/*滚动条的背景颜色*/
			-webkit-border-radius: 0;
			/*滚动条的圆角宽度*/
		}

		&::-webkit-scrollbar {
			width: 10px;
			/*滚动条的宽度*/
			height: 8px;
			/*滚动条的高度*/
		}

		&::-webkit-scrollbar-thumb:vertical {
			/*垂直滚动条的样式*/
			height: 50px;
			background-color: rgba(153, 153, 153, 0.5);
			-webkit-border-radius: 4px;
			outline: 2px solid #fff;
			outline-offset: -2px;
			border: 2px solid #fff;
		}

		&::-webkit-scrollbar-thumb {
			/*滚动条的hover样式*/
			background-color: rgba(159, 159, 159, 0.3);
			-webkit-border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb:hover {
			/*滚动条的hover样式*/
			background-color: rgba(159, 159, 159, 0.5);
			-webkit-border-radius: 4px;
		}
	}
</style>
